<template>
  <div id="misson">
    <div class="main">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
    <!--<dw-tabber></dw-tabber>-->
    <div class="tabber">
      <van-tabbar
        v-model="active"
        active-color="#FDCC4A"
        @change="tabChange"
      >
        <van-tabbar-item v-for="(item,index) in tabbar" :key="index">
          <span>{{item.label}}</span>
          <img
            slot="icon"
            slot-scope="props"
            :src="props.active ? item.icon.active : item.icon.normal"
          >
        </van-tabbar-item>

      </van-tabbar>
    </div>
  </div>
</template>

<script>
  /**
   *
   * @Author zzl
   * @Date 2019/5/7 14:24.
   */
  import dwTabber from '../nav/tabbar.vue';

  export default {
    mounted() {
      switch (this.$route.path) {
        case '/lobby':
          this.active = 0;
          break;
        case '/mine':
          this.active = 1;
          break;
        case '/center':
          this.active = 2;
          break;
      }
    },
    components: {
      dwTabber
    },
    props: {},
    data() {
      return {
        active: 0,
        tabbar: [{
          label: "任务大厅",
          icon: {
            normal: require("../../assets/images/ic_hall_n.png"),
            active: require("../../assets/images/ic_hall_p.png"),
          }
        }, {
          label: "我的任务",
          icon: {
            normal: require("../../assets/images/ic_task_n.png"),
            active: require("../../assets/images/ic_task_p.png"),
          }
        }, {
          label: "个人中心",
          icon: {
            normal: require("../../assets/images/ic_my_n.png"),
            active: require("../../assets/images/ic_my_p.png"),
          }
        }]
        // selected:true
      }
    },
    computed: {},
    methods: {
      /*
      * 底部标签栏切换
      * */
      tabChange(e) {
        switch (e) {
          case 0:
            this.$router.push('/lobby');
            break;
          case 1:
            this.$router.push('/mine');
            break;
          case 2:
            this.$router.push('/center');
            break;
        }
      }
    },
    watch: {
      $route(to, from) {
        switch (to.path) {
          case '/lobby':
            this.active = 0;
            break;
          case '/mine':
            this.active = 1;
            break;
          case '/center':
            this.active = 2;
            break;
        }
      }
    },
    filters: {},
    beforeDestroy() {

    }
  }
</script>

<style lang="less" scoped>
  #misson {
    width: 100%;
    height: 100%;
    background: white;
    .main{
      width: 100%;
      height: calc(100% - 50px);
      overflow: hidden;
    }
    .tabber {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 50px;
      box-shadow: 0px -4px 12px 0px rgba(240, 240, 240, 0.7);
    }

  }

</style>
